<script setup lang="ts">
import SonCom from "./components/Son.vue";
import HmButton from "./components/HmButton.vue";
import { provide, ref } from "vue";
import HmNavbar from "./components/HmNavbar.vue";
const myEvent = (age: number) => {
  console.log(" 接收到年龄" + age);
};

const getName  = (name: string) => {
  console.log(" 接收到名字" + name);
};
const totalCount=ref(100)
provide('totalCount',totalCount)
provide('updateTotalCount',(num:number)=>{
  totalCount.value+=num
})

const appTitle = ref('应用标题')
const leftClick = (val: string) => {
  alert(val)
}
</script>

<template>
  <HmNavbar v-bind:title="appTitle" @left-click-handler="leftClick"> <button>传递插槽右侧按钮</button></HmNavbar>
  <h1>App 根组件</h1>
  <button @click="totalCount++">修改父组件数据</button>
  <!-- 
    父传子：通过 v-bind: 和 props 传递数据
    子传父：通过 v-on: 和 emits 传递数据（传回调函数给子组件调用）
  -->
  <SonCom :name="'张三'" :age="18" @my-event="myEvent($event)" @get-name="getName($event)" />
  <SonCom :name="'李四'" :age="20" @my-event="myEvent" @get-name="getName" />
  <!-- 父传子，text 为可选参数 -->
  <HmButton :text="'登录'" />
  <HmButton :text="'注册'" />
  <HmButton />
</template>
